<template>
    <div class="frame">
        <div class="top">
            <el-card style="flex: 1;">
                <h2>游客，你好</h2>
                <div style="display: flex; align-items: baseline;">
                    <h3 style="font-weight: 300;">欢迎来到，</h3>
                    <h2>网络通讯模块</h2>
                </div>
                <!-- <div class="box">
                    <div class="bottom">
                        <h3 class="title">欢迎来到【网络通信】</h3>
                    </div>
                </div> -->
            </el-card>
            <el-card style="flex: 2;">
                <p>模块简介：</p>
                <p>我们在这里探讨网络通讯技术</p>
                <p>通过websocket实现聊天室功能</p>
                <p>通过webRTC实现视频通话功能</p>
            </el-card>
        </div>
        <div class="bottoms">
            <el-carousel :interval="6000" class="test el-card" height="100%">
                <el-carousel-item v-for="item in 1" :key="item" style="padding: 40px;">
                    <p>WebSocket</p>
                    <p>一种在单个 TCP 连接上进行全双工通信的协议，它为客户端和服务器之间提供了持久化的连接，允许双方随时发送数据，而不需要像传统的 HTTP 协议那样频繁地建立和断开连接。</p>
                    <p>‌核心特点‌</p>
                    <ul style="list-style: disc; margin-left: 20px;">
                        <li>‌全双工通信‌：客户端和服务器可以同时发送和接收数据，实现真正的双向通信。</li>
                        <li>‌低延迟‌：由于连接是持久的，避免了 HTTP 的握手开销，数据传输更高效。</li>
                        <li>‌轻量级协议‌：数据帧格式简单，头部开销小，适合高频、小数据量的场景。</li>
                        <li>‌支持心跳机制‌：通过 Ping/Pong 帧检测连接状态，避免因网络问题导致连接假死。</li>
                        <li>‌跨域支持‌：通过握手阶段的 Origin 头部和服务器配置实现安全的跨域通信。</li>
                    </ul>
                    <p>‌应用场景‌</p>
                    <ul style="list-style: disc; margin-left: 20px;">
                        <li>‌实时应用‌：如聊天应用、在线协作工具、实时游戏等。</li>
                        <li>金融交易‌：股票行情、实时报价等需要高频更新的场景。</li>
                        <li>物联网（IoT）‌：设备状态监控、指令下发等双向通信需求。</li>
                        <li>推送服务‌：替代传统的轮询（Polling）或长轮询（Long Polling），实现服务器主动推送。</li>
                        <li>‌跨域支持‌：通过握手阶段的 Origin 头部和服务器配置实现安全的跨域通信。</li>
                    </ul>
                    <p>与 HTTP 的区别‌</p>
                    <ul style="list-style: disc; margin-left: 20px;">
                        <li>性能‌：WebSocket 更适合实时性要求高的场景，避免了 HTTP 的冗余头部和连接开销。</li>
                        <li>连接方式‌：HTTP 是无状态的短连接，每次请求需重新建立；WebSocket 是持久化连接。</li>
                        <li>通信模式‌：HTTP 是单向的（客户端发起请求，服务器响应）；WebSocket 是双向的。</li>
                    </ul>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
  
<script setup lang="ts">


</script>
  
<style scoped lang="scss">
.frame {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 40px;
    row-gap: 20px;

    .top {
        flex: 1;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        // align-items: center;
        column-gap: 20px;
    }

    .bottoms {
        flex: 3;

        .test {
            width: 100%;
            height: 100%;
            background-color: skyblue;
            border-radius: 10px;
        }
    }
}

.box {
    display: flex;

    .avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }

    .bottom {
        margin-left: 20px;

        .title {
            font-size: 18px;
            // font-weight: 900;
            margin-bottom: 30px;
        }

        .subtitle {
            font-style: italic;
            color: skyblue;
        }
    }
}




.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>